// Ionicons Font Path
// --------------------------
@font-face{
  font-family: $ionicons-font-family;
  src:url("#{$ionicons-font-path}/ionicons.eot?v=#{$ionicons-version}");
  src:url("#{$ionicons-font-path}/ionicons.eot?v=#{$ionicons-version}#iefix") format("embedded-opentype"),
  url("#{$ionicons-font-path}/ionicons.ttf?v=#{$ionicons-version}") format("truetype"),
  url("#{$ionicons-font-path}/ionicons.woff?v=#{$ionicons-version}") format("woff"),
  url("#{$ionicons-font-path}/ionicons.woff") format("woff"), /* for WP8 */
  url("#{$ionicons-font-path}/ionicons.svg?v=#{$ionicons-version}#Ionicons") format("svg");
  font-weight: normal;
  font-style: normal;
}

.ion{
  display:inline-block;
  font-family:$ionicons-font-family;
  speak:none;
  font-style:normal;
  font-weight:normal;
  font-variant:normal;
  text-transform:none;
  text-rendering:auto;
  line-height:1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

// Ionicons Icons
// --------------------------
.ionicons,
.ion-thumbsup:before,
.has_right_arrow:before{
  @extend .ion;
}

.ion-reply::before {
    content: "\f21e";
}

.ion-checkmark-circled:before {
    content: "\f120";
}

.ion-ios-bookmarks-outline:before {
    content: "\f3e9";
}
.ion-ios-heart-outline:before {
    content: "\f442";
}
.has_right_arrow:before{
  content: "\f3d3";
}
.ion-android-happy:before {
    content: "\f38e";
}
.ion-alert-circled:before {
  content: "\f100";
}
.ion-alert:before {
    content: "\f101";
}
.ion-information-circled:before {
  content: "\f149";
}
.ion-ios-briefcase:before {
  content: "\f3ee";
}
.ion-ios-browsers:before {
  content: "\f3f0";
}
.ion-speakerphone:before {
  content: "\f2b2";
}
.ion-flash:before {
  content: "\f137";
}
.ion-android-car:before {
  content: "\f36f";
}
.ion-coffee:before {
  content: "\f272";
}
.ion-ribbon-b:before {
  content: "\f349";
}

.ion-ios-paper-outline:before {
    content: "\f471";
}

.ion-ios-arrow-up:before {  //向上图标
  content: "\f3d8";
}
.ion-ios-arrow-down:before {  // 向下图标
  content: "\f3d0";
}
.ion-android-time:before {  // 时钟
  content: "\f3b3";
}
.ion-clock:before {     // 时钟2
  content: "\f26e";
}
.ion-android-apps:before {  // 类型
  content: "\f35c";
}
.ion-person:before {    //责任
  content: "\f213";
}
.ion-flash:before {    // 事故
  content: "\f137";
}
.ion-android-remove-circle:before { // 扣分
  content: "\f3a9";
}
.ion-search:before {
  content: "\f21f";
}
.ion-forward:before {
  content: "\f13a";
}
.ion-android-add-circle:before {
  content: "\f359";
}
.ion-ios-arrow-right:before {
  content: "\f3d3";
}
.ion-android-add:before {
  content: "\f2c7";
}
.ion-android-menu:before {  // 分类
  content: "\f394";
}
.ion-ios-paper:before {
  content: "\f472";
}
.ion-close-circled:before {
  content: "\f128";
}
.ion-ios-search:before {
    content: "\f4a5";//search
}
.ion-checkmark-round:before {     // 对号
  content: "\f121";
}
.ion-model-s:before {     // 型号
  content: "\f2c1";
}
.ion-android-car:before {   // 汽车
  content: "\f36f";
}
.ion-pin:before { // 标记
  content: "\f2a6";
}
.ion-help-buoy:before {
  content: "\f27c";
}
.ion-plus-circled:before {
  content: "\f216";
}
.ion-ios-close:before {
    content: "\F406";
}
.ion-android-happy:before {
    content: "\f38e";
}
.ion-android-sad:before {
    content: "\f3ab";
}
.ion-android-star:before {
    content: "\f2fc";
}
.ion-checkmark:before {
  content: "\f122";
}
.icon_star{
  font-size: 18rem / $baseFontSize;
  color:#FFEEC7;
}
.icon_star_highlight{
  font-size: 12rem / $baseFontSize;
  color:#FCC136;
}
.ion-checkmark-round:before {     // 对勾
  content: "\f121";
}
.ion-android-star-outline:before {
    content: "\f3ae";
}
.ion-android-alert:before {
    content: "\f35b";
}
.ion-ios-location-outline:before {
    content: "\f455";
}
.ion-navicon:before {
    content: "\f20e";
}
.ion-ios-cog-outline:before {
    content: "\f411";
}
.ion-ios-information-empty:before {
    content: "\f44b";
}
.ion-ios-people-outline:before {
    content: "\f47b";
}
.ion-ios-people:before {
    content: "\f47c";
}
.ion-android-navigate:before {
    content: "\f398";
}
.ion-trash-a:before {
  content: "\f252";
}
.ion-chevron-up:before {
  content: "\f126";
}
.ion-chevron-down:before {
  content: "\f123";
}
.ion-chevron-right::before {
    content: "\f125";
}
.ion-arrow-up-c:before {
    content: "\f10e";
}
.ion-arrow-down-c:before {
    content: "\f105";
}
.ion-ios-circle-outline:before {        //圆圈
  content: "\f401";
}
.ion-ios-checkmark:before {             //圆圈选中效果
  content: "\f3ff";
}
.ion-ios-rose:before {
    content: "\f4a3";
}
.ion-help-circled:before {
    content: "\f142";
}

.ion-arrow-graph-up-right:before {
    content: "\f262";
}

// img Icons
// --------------------------
.icon_castrol{
  display:inline-block;
  background: url(../img/icon_castrol.png) no-repeat;
  background-size: 100%;
  vertical-align: middle;


  &.circle{
    width:26rem / $baseFontSize;
    height:26rem / $baseFontSize;
    border: 1px solid #006634;
    border-radius: 50%;
    margin-bottom: 6rem / $baseFontSize;

    &.car{
      background-position: 6rem / $baseFontSize 7rem / $baseFontSize;
    }
    &.eye{
      background-position: 5rem / $baseFontSize -19.2rem / $baseFontSize;
    }
    &.per_info{
      background-position: 6.9rem / $baseFontSize -45rem / $baseFontSize;
    }
  }

  // &.mark{//标签
  //   width:10rem / $baseFontSize;
  //   height:11rem / $baseFontSize;
  //   background-position: 0 -60rem / $baseFontSize;
  //   background-size:200%;
  // }
   @at-root .icon_mark{//标签
    display:inline-block;
    width:10rem / $baseFontSize;
    height:11rem / $baseFontSize;
    background:url(../img/icon_mark.png) no-repeat;
    background-size:100%;
    vertical-align: middle;
    margin-right: 5rem / $baseFontSize;
  }

  &.earn{
    width:20rem / $baseFontSize;
    height:20rem / $baseFontSize;
    background-position: 0 -79rem / $baseFontSize;
    margin-right: 10rem / $baseFontSize;
  }
  &.pay{
    width:20rem / $baseFontSize;
    height:18rem / $baseFontSize;
    background-position: 0 -96rem / $baseFontSize;
     margin-right: 10rem / $baseFontSize;
  }
  &.balance{
    width:20rem / $baseFontSize;
    height:18rem / $baseFontSize;
    background-position: 0 -118rem / $baseFontSize;
     margin-right: 10rem / $baseFontSize;
  }
  &.happy{
    width:17rem / $baseFontSize;
    height: 17rem / $baseFontSize;
    background-position: 3rem / $baseFontSize -117rem / $baseFontSize;
  }
  &.warn{
    width:17rem / $baseFontSize;
    height: 17rem / $baseFontSize;
    background-position: 3rem / $baseFontSize -184rem / $baseFontSize;
  }
  &.sad{
    width:17rem / $baseFontSize;
    height: 17rem / $baseFontSize;
    background-position: 3rem / $baseFontSize -200rem / $baseFontSize;
  }
  // &.jewel{
  //   width:17rem / $baseFontSize;
  //   height: 14rem / $baseFontSize;
  //   background-position: 3rem / $baseFontSize -134rem / $baseFontSize;
  // }
  @at-root .icon_jewel{
    display:inline-block;
    width:20rem / $baseFontSize;
    height: 14rem / $baseFontSize;
    background: url(../img/icon_jewel.png) no-repeat;
    background-size: 90%;
  }
  &.star{
    width:14rem / $baseFontSize;
    height: 13rem / $baseFontSize;
    background-size: 130%;

    &.star_highlight{
      background-position: 0 -164rem / $baseFontSize;
    }
    &.star_light{
      background-position: 0 -181rem / $baseFontSize;
    }
  }
  &.heart{
    background-position: 0 -350rem / $baseFontSize;
  }
  &.heart_red{
    background-position: 0 -325rem / $baseFontSize;
  }

}

//dot
.icon_dot{
  display:inline-block;
  width:7rem / $baseFontSize;
  height:7rem / $baseFontSize;
  border-radius: 50%;
  margin-right: 10rem / $baseFontSize;

  &.dot_orange{
    background-color:$orange;
  }
  &.dot_red{
    background-color:#f02e4a;
  }
  &.dot_yellow{
    background-color:#FFCF14;
  }
  &.dot_lighterYellow{
    background-color:#FFF26A;
  }
  &.dot_red2{
    background-color:#FF907C;
  }
}
//solid circle
.icon_disk{
  display:inline-block;
  width: 12rem / $baseFontSize;
  height: 12rem / $baseFontSize;
  border-radius: 50%;
  text-align: center;
  line-height:12rem / $baseFontSize;
  vertical-align: middle;
  margin-right: 10rem / $baseFontSize;
  font-style: normal;
  color:#fff;

  &.green_disk{
    background-color: #009e4c;
  }
  &.lightgreen_disk{
    background-color: #75b428;
  }
  &.blue_disk{
    background-color: #28b4f1;
  }
  &.yellow_disk{
    background-color: #ffcf13;
  }
  &.red_disk{
    background-color: #fe5f3c;
  }
  &.orange_disk{
    background-color: #ff8c31;
  }

  &.ion{
    color:#fff;
    font-size: 11rem / $baseFontSize;
  }
  &.ion-alert{
    font-size: 10rem / $baseFontSize;
  }
  &.ion-android-alert{
    font-size: 17rem / $baseFontSize;
    color:#fe5f3c;
  }
  &.ion-ios-information-empty {
      font-size: 22rem / $baseFontSize;
  }
  &.icon_time{
    position: relative;
    &:before,&:after{
      content:'';
      position: absolute;
      width: 5rem / $baseFontSize;
      height: 4rem / $baseFontSize;
      border-left: 1px solid #fff;
    }
    &:before{
      top:7rem / $baseFontSize;
      left:3rem / $baseFontSize;
      @include rotate(120deg);
    }
    &:after{
      top:2rem / $baseFontSize;
      left:5rem / $baseFontSize;
    }

  }

  &.icon_image{
    position: relative;

    &:before,&:after{
      content:'';
      position: absolute;
      bottom:3.5rem / $baseFontSize;

      width:0;
      height:0;
      border:3rem / $baseFontSize solid transparent;
      border-bottom: 4rem / $baseFontSize solid #fff;
    }
    &:before{
      left:1rem / $baseFontSize;
      border:3rem / $baseFontSize solid transparent;
      border-bottom: 4rem / $baseFontSize solid #fff;

    }
    &:after{
      left:5rem / $baseFontSize;
      border:4rem / $baseFontSize solid transparent;
      border-bottom: 5rem / $baseFontSize solid #fff;

    }
  }

}
.ion-color-ra{
  color:#C8C8CD;
}
